<template>
  <div class="app-container preWorkBox">
    <div class="content">
      <div>
        <el-form
          ref="form"
          class="perForm"
          :model="form"
          :rules="rules"
          label-width="120px"
          size="medium"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="SN码:" prop="sn">
                <el-input
                  id="ipqc-input"
                  v-model="form.snCode"
                  type="textarea"
                  placeholder="输入SN码"
                  :autosize="{ minRows: 2, maxRows: 5 }"
                  style="width: 400px; height: 50px"
                  @input="snbuttonQuery"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row style="width:80vw">
            <el-col :span="8">
              <el-form-item label="工单编码" prop="workorderCode">
                <el-input v-model="form.workorderCode" placeholder :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="sn码" prop="snCode">
                <el-input v-model="form.snCode" placeholder :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属产线" prop="lineName">
                <el-input v-model="form.lineName" placeholder :disabled="true" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="width:80vw">
            <el-col :span="8">
              <el-form-item label="产品编码" prop="productCode">
                <el-input v-model="form.productCode" placeholder :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="产品名称" prop="productName">
                <el-input v-model="form.productName" placeholder :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="产品规格" prop="productSpec">
                <el-input v-model="form.productSpec" placeholder :disabled="true" />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-row style="width:80vw">
            <el-col :span="8">
              <el-form-item label="检验状态" prop="status">
                <el-input v-model="form.status" placeholder :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="检验员" prop="checkUser">
                <el-input v-model="form.checkUser" placeholder :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="检验时间" prop="checkTime">
                <el-input v-model="form.checkTime" placeholder :disabled="true" />
              </el-form-item>
            </el-col>
          </el-row>-->
          <el-row style="width:80vw">
            <el-col :span="8">
              <el-form-item label="驳回类型" prop="rejectType">
                <el-radio-group v-model="form.rejectType" :disabled="true">
                  <el-radio label="0">驳回返修</el-radio>
                  <el-radio label="1">驳回返工</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="驳回原因" prop="rejectReason">
                <el-input v-model="form.rejectReason" placeholder :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="驳回时间" prop="rejectTime">
                <el-input v-model="form.rejectTime" placeholder :disabled="true" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div>
            <p style="color: red" v-if="form.submissionStatus =='1'" >
              该工位已提交！！！
            </p>
            <p style="color: red" v-if="form.submissionStatus =='0'" >
              该工位未报工！！！
            </p>
          </div>
        <div slot="footer" class="dialog-footer">
          <!-- <el-button @click="reset" style="font-size: 24px;">重 置</el-button> -->
          <el-button type="primary" style="font-size: 24px;" v-if="form.submissionStatus =='2'" @click="submitForm">提 交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
      
  <script>
import {
  mobSubmit,
  addSubmitLineInfo,
  getSubmitIpqc
} from "@/api/apppro/index";

export default {
  name: "abnormal",
  data() {
    return {
      tab: "1",
      form: {},
      rules: {
        exceptionId: [
          { required: true, message: "异常描述不能为空", trigger: "change" }
        ],
        type: [
          { required: true, message: "异常类型不能为空", trigger: "change" }
        ]
      },
      remarkList: [],
      warningType: undefined, // 是否警告
      query: {}
    };
  },
  props: {
    formObj: Object
  },
  created() {
    // this.getCode();
  },
  methods: {
    statusfun(index) {
      return "process";
    },
    //sn扫码函数
    snbuttonQuery(e) {
      var myInputOrder = document.getElementById("ipqc-input");
      myInputOrder.onkeydown = even => {
        console.log(even, "=====e=====");
        if (even.key == "Enter") {
          // this.reset()
          //赋值给v-model
          this.form.snCode = e;
          this.getList();
        }
      };
    },
    getList() {
      let obj = { ...this.formObj };
      obj.snCode = this.form.snCode;
      getSubmitIpqc(obj).then(res => {
        this.form = {
          ...(res.data.qcLineRejectRecords || {}),
          ...(res.data.qcLineSubmissionDetails || {}),
          ...(res.data.qcIpqcAll || {})
        };
        this.query = res.data;
        console.log(res, "==========res===========");
      });
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          addSubmitLineInfo(this.query).then(res => {
            console.log(res, "=======res=======");
            this.$modal.msgSuccess(res.msg);
          });
        }
      });
    },
    radiOChange(value) {
      this.getList(value);
    },
    reset() {
      this.form = {
        snCode: undefined,
        type: this.form.type
      };
      // this.autoGenFlag = false;
      this.resetForm("form");
    }
  }
};
</script>
      
  <style rel="stylesheet/scss" lang="scss" scoped>
.preWorkBox ::v-deep .el-icon-check::before {
  // display: none !important;
  content: "";
}

.perForm ::v-deep .el-form-item__label {
  font-size: 18px;
}

.perForm ::v-deep .el-radio__label {
  font-size: 18px;
}

.content {
  margin-top: 20px;
  text-align: center;
  display: flex;
  justify-content: center;

  div {
    font-size: 18px;
  }
}
.andengDiv {
  margin-top: 20px;
  button {
    font-size: 16px;
    position: relative;
    border-radius: 100%;
    height: 60px;
    width: 72px;
    z-index: 4;
    text-align: center;
    outline: none;
    color: white;
    background: #ec0c00;
    background: radial-gradient(hsl(0, 100%, 50%), hsl(0, 100%, 40%));
    text-shadow: 0 -1px 0 #c30707;

    border: 1px solid hsl(4, 100%, 20%);

    box-shadow: inset 0 1px 0 hsl(10, 100%, 50%), 0 2px 0 hsl(10, 100%, 20%),
      0 3px 0 hsl(8, 100%, 18%), 0 4px 0 hsl(0, 100%, 16%),
      0 5px 0 hsl(0, 100%, 14%), 0 6px 0 hsl(0, 100%, 12%);
  }
  .red {
    background: #ec0c00;
    background: radial-gradient(hsl(0, 100%, 50%), hsl(0, 100%, 40%));
    text-shadow: 0 -1px 0 #c30707;

    border: 1px solid hsl(4, 100%, 20%);

    box-shadow: inset 0 1px 0 hsl(10, 100%, 50%), 0 2px 0 hsl(10, 100%, 20%),
      0 3px 0 hsl(8, 100%, 18%), 0 4px 0 hsl(0, 100%, 16%),
      0 5px 0 hsl(0, 100%, 14%), 0 6px 0 hsl(0, 100%, 12%);
  }
  .yellow {
    background: #ece000;
    background: radial-gradient(hsl(54, 100%, 50%), hsl(53, 100%, 40%));
    text-shadow: 0 -1px 0 #c39a07;

    border: 1px solid hsl(47, 100%, 20%);

    box-shadow: inset 0 1px 0 hsl(57, 100%, 50%), 0 2px 0 hsl(53, 100%, 20%),
      0 3px 0 hsl(52, 100%, 18%), 0 4px 0 hsl(50, 100%, 16%),
      0 5px 0 hsl(58, 100%, 14%), 0 6px 0 hsl(52, 100%, 12%);
  }
  .green {
    background: #37ec00;
    background: radial-gradient(hsl(101, 100%, 50%), hsl(100, 100%, 40%));
    text-shadow: 0 -1px 0 #2dc307;

    border: 1px solid hsl(106, 100%, 20%);

    box-shadow: inset 0 1px 0 hsl(107, 100%, 50%), 0 2px 0 hsl(108, 100%, 20%),
      0 3px 0 hsl(115, 100%, 18%), 0 4px 0 hsl(118, 100%, 16%),
      0 5px 0 hsl(122, 100%, 14%), 0 6px 0 hsl(123, 100%, 12%);
  }
  .blue {
    background: #008eec;
    background: radial-gradient(hsl(203, 100%, 50%), hsl(201, 100%, 40%));
    text-shadow: 0 -1px 0 #077bc3;

    border: 1px solid hsl(203, 100%, 20%);

    box-shadow: inset 0 1px 0 hsl(201, 100%, 50%), 0 2px 0 hsl(212, 100%, 20%),
      0 3px 0 hsl(215, 100%, 18%), 0 4px 0 hsl(216, 100%, 16%),
      0 5px 0 hsl(218, 100%, 14%), 0 6px 0 hsl(220, 100%, 12%);
  }
}

.flash {
  background-color: red;
  color: #fff;
  -webkit-animation-name: flash;
  animation-name: flash;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-duration: 1s;
}

@-webkit-keyframes flash {
  /*只用修改这里就可以实现不同动画。例如大小闪烁transform: scale(.9);*/
  0%,
  100%,
  50% {
    opacity: 1;
    transform: scale(1);
  }

  25%,
  75% {
    opacity: 0.4;
    transform: scale(0.9);
  }
}

@keyframes flash {
  0%,
  100%,
  50% {
    opacity: 1;
    transform: scale(1);
  }

  25%,
  75% {
    opacity: 0.4;
    transform: scale(0.9);
  }
}
</style>
      